<!--课程里面的实验 todo-->

<template>
  <MenuPage >
    <template slot="search">

      <Input clearable v-model.trim="searchSceneNameValue" placeholder="课程名称" @on-change="searchSceneName" style="width: 180px;margin-left: 15px;" />

      <Select filterable
              clearable
              placeholder="授课状态"
              v-model="isSelf"
              style="width: 150px;margin-left: 15px;"
              @on-change="expSceneOnChange(1)"
      >
        <i-option :value="Number(value)" v-for="(label,value)  in selftypeMap" :key="value">{{label}}</i-option>
      </Select>
      <Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshScene()"><i class="el-icon-refresh-right" /></Button>
    </template>
    <template slot="content">
      <div class="table-wrap">
        <template v-if="showContent">
          <div class="exper-wrap" v-for="(item,key) in expSceneList" :key="key" :style="{'marginRight':((key+1)%spanNum == 0 ? 0:marginRight),'width':setExperWid,'height':setExperHie}" @mouseleave="hideDelPop">
            <div @click="goExperDetail(item)" style="height:100%;">
              <div class="image-box">
                <img class="exper-img" :src="handleImage(item.topology)" @error="setDefImg">
                <div v-if="item.expType == 0" :class="$options.filters.deployStatusFilter(item.deployStatus,'color')" class="top-status">{{item.deployStatus | deployStatusFilter('text')}}</div>
                <div class="img-mask">
                  <div class="exper-top">
                    <div class="exper-left">
                      <div class="exper-name" :title="item.ecname">{{item.ecname}}</div>
                      <div class="exper-info">
                        <p class="space-between">
                          <small class="exper-user" :title="item.designer">创建者：{{item.designer}}</small>
                          <small class="exper-tag">{{handleDiffcult(item.difficulty)}}·<span :style="{color:handlePublic(item.isPublic).color}">{{handlePublic(item.isPublic).text}}</span>·{{item.hours}}课时</small>
                        </p>
                        <p>
                          <small class="exper-time"> 时间：{{showTimeNotSecond(item.createTime)}}</small>
                        </p>
                        <p class="space-between">
                          <small class="exper-type" style="margin-right:5px;" :title="handleDirection(item.typeCode)"> 方向：{{handleDirection(item.typeCode)}}</small>
                          <small class="exper-type" style="margin-right:5px;" :title="handleTypeCode(item.typeCode)"> 类型：{{handleTypeCode(item.typeCode)}}</small>
                        </p>
                        <p class="space-between">
                          <small class="exper-type" style="margin-right:5px;"> 课件用途：{{selftypeMap[item.selfType]}}</small>
                        </p>
                        <p class="space-between" v-if="$route.name.includes('experiment')">
                          <small class="exper-type" style="margin-right:5px;"> 是否关联实物设备：{{item.deviceBaseType?'是':'否'}}</small>
                        </p>
                      </div>
                      <div class="oper-btn" @click.stop="cancel">
                        <Button class="exper-btn" :disabled="setReBtnStatus(item)" @click.stop="modifyExper(item)" size="small">修改</Button>
                        <Tag color="blue" title="点击查看详情" @click.native="showSubscriberModal(item)" style="padding:0 4px;margin:0px;height:auto;line-height:initial;cursor:pointer!important">{{item.subscriberNum}}次使用</Tag>
                        <Poptip v-model="hideDel" confirm title="确定要删除这个课件吗？" @on-ok="delExper(item)">
                          <Button class="exper-btn" :disabled="setReBtnStatus(item)" size="small">删除</Button>
                        </Poptip>
                      </div>
                    </div>
                    <div class="exper-right" v-if="routePath == 'videoExp'">
                      <p class="spaceBetween exper-count" style="width:100%;height:100%">
                        <span title="点赞次数">
                          <img src="../../../assets/exper/likes.png" alt='点赞次数' class="exper-icon">
                          {{item.likedCount}}
                        </span>
                        <span title="播放次数" style="margin: 0 5px">
                          <img src="../../../assets/exper/plays.png" alt='播放次数' class="exper-icon">
                          {{item.playCount}}
                        </span>
                        <span title="已学总人数">
                          <img src="../../../assets/exper/learnedcounts.png" alt='已学总人数' class="exper-icon">
                          {{item.usedTimes}}
                        </span>
                      </p>
                    </div>
                  </div>
                  <div class="exper-bottom space-between">
                    <div style="flex: 1; overflow: hidden; padding-right: 5px;">
                      <div style="display: flex;align-items: center;">
                        <Rate allow-half v-model="item.scoreAvgStar" disabled />
                        <div>{{item.scoreAvg}}分</div>
                      </div>
                      <span class="exper-bottom-name" :title="item.ecname" style="display: inline-block; width: 100%;">
                        {{item.ecname}}
                      </span>
                    </div>
                    <span class="exper-model" :title="handleExperType(item.expType)" v-if="routePath != 'videoExp'">{{handleExperType(item.expType)}}</span>
                    <div style="white-space: nowrap; padding-left: 1px; position: relative; bottom: 6px;" v-else>
                      <span>
                        <img src="../../../assets/exper/likes.png" alt='点赞次数' class="exper-icon">
                        {{item.likedCount}}
                      </span>
                      <span style="margin:0 5px;">
                        <img src="../../../assets/exper/plays.png" alt='播放次数' class="exper-icon" >
                        {{item.playCount}}
                      </span>
                      <span>
                        <img src="../../../assets/exper/learnedcounts.png" alt='已学人数' class="exper-icon">
                        {{item.usedTimes}}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom-page-wrap">
            <Page :total=expSceneTotal :page-size="expScenePageSize" :current="expScenePage" show-total show-elevator @on-change="expSceneOnChange" />
          </div>
        </template>
        <no-data :noDataText="showDefText" v-if="showDefImg"></no-data>
      </div>
    </template>
  </MenuPage>
</template>
<script>
import encryption from '@/libs/encryption.js';
import { experType, getSelLabelType } from '@/api/dict.js';
import { getExpListNotPrivate,getExpList, delExper, getExperSubscriberPage, getScoreAvg } from '@/api/selfStudy/courseExp.js';
import defaultImg from '@/assets/globalIcon/course.jpg';
import { debounce,showTimeNotSecond } from '@/libs/utils';
import TagSelect from '@/components/tagSelect/tagSelect';
import pageTitle from '@/mixin/pageTitle';
export default {
  mixins: [pageTitle],
  components: {
    TagSelect
  },
  data() {
    return {
      showTimeNotSecond,
      queryParams: {
        page: 1,
        rows: 10,
        ecid: ''
      },
      userData: {
        list: [],
        total: 0
      },
      selftypeMap:{
        0:'培训',
        1:'自学',
        2:'通用',
      },
      isSelf: '',
      labelList: [], // 标签
      // 用户信息
      USER_ID: '',
      isRootDesigner: false,
      showProjectSelect: false,
      defaultImg, // 课件的默认图片
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      //				contentHei: 'auto',
      setTableHei: 'auto',
      spanNum: 4,
      getWidth: 0,
      marginLeft: 'auto',
      marginRight: 'auto',
      setExperHie: '0',
      setExperWid: 'auto',
      setImgHei: '145px',
      // 课件数据
      expSceneList: [],
      expScenePage: 1,
      expScenePageSize: 18,
      isPublic: 'All',
      labelExp: 'All',
      visibilityArr: [
        // {
        //   key: '0',
        //   value: '个人'
        // },
        {
          key: '1',
          value: '单位'
        },
        {
          key: '2',
          value: '系统'
        }
      ],
      expSceneTotal: 0,
      sceneListLoading: false,
      createByMe: false,
      selectDifficult: 'All',
      diffArr: [
        {
          key: 'Simple',
          value: '简单'
        },
        {
          key: 'Medium',
          value: '中等'
        },
        {
          key: 'Hard',
          value: '较难'
        }
      ],
      searchSceneNameValue: '',
      searchSceneDesignerValue: '',
      selectDeployStatus: 'All',
      selectExperType: '',
      // 课件类型
      expClassify: [],
      expClassifyLevel1: [],
      expClassifyLevel2: [],
      directionModel: 'All',
      directionModelLevel1: 'All',
      // 缺省图
      showDefImg: true,
      showDefText: '加载中',
      showContent: false,
      //使用人数modal
      subscriberModal: false,
      curCourseName: '',
      subscriberCol: [
        {
          title: '昵称',
          key: 'username',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '使用方式',
          key: 'type',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '使用时间',
          key: 'createtime',
          align: 'center'
          //						ellipsis: true,
          //						tooltip:true
        }
      ],
      hideDel: false,
      showMore: false,
      queryHeight: 274,
      isNeedInitQuery: false,
      // 获取标签
      expClassifyTag: []
    };
  },
  created() {
    // 获取用户id
    let November = sessionStorage.getItem('November');
    November = JSON.parse(encryption.SelfUseDecrypt(November));
    this.USER_ID = November.userId;
    this.isRootDesigner = November.isRootDesigner;
  },
  filters: {
    deployStatusFilter(val, type) {
      let str = '';
      if (type == 'text') {
        switch (val) {
          case 0:
            str = '未部署';
            break;
          case 1:
            str = '部署中';
            break; //同步成功
          case 2:
            str = '待部署';
            break;
          case 3:
            str = '部署成功';
            break;
          case 4:
            str = '导入失败';
            break;
          case 5:
            str = '已修改';
            break;
          case 6:
            str = '部署失败';
            break;
          case 7:
            str = '修改错误';
            break;
          case 8:
            str = '删除失败';
            break;
          case 9:
            str = '部署中 ';
            break;
          case 10:
            str = '未部署';
            break;
          case 11:
            str = '修改失败';
            break;
          case 12:
            str = '待删除';
            break;
          case 13:
            str = '清空部署中';
            break;
          case 14:
            str = '清空部署失败';
            break;
          case 15:
            str = '部署校验中';
            break;
          case 16:
            str = '工程导入中';
            break;
          case 17:
            str = '工程导入失败';
            break;
          default:
            break;
        }
      } else {
        switch (val) {
          case 0:
            str = 'notBegin';
            break;
          case 1:
            str = 'beginning';
            break;
          case 3:
            str = 'beginning';
            break;
          case 4:
            str = 'finish';
            break;
          case 6:
            str = 'finish';
            break;
          case 7:
            str = 'finish';
            break;
          case 8:
            str = 'finish';
            break;
          case 11:
            str = 'finish';
            break;
          case 14:
            str = 'finish';
            break;
          case 10:
            str = 'notBegin';
            break;
          case 17:
            str = 'finish';
            break;
          default:
            str = 'notBegin';
            break;
        }
      }
      return str;
    }
  },
  computed:{
    videoExpTitle () { // videoExp 视频课件改成 理论课件
      if(this.$store.getters.getMenuName('videoExp')){
        return this.$store.getters.getMenuName('videoExp').substring(0,2)
      }
      return undefined
    },
    routePath () { // videoExp 视频课件改成 理论课件
      return this.$route.name
    },
  },
  watch: {
    $route(to, from) {
      this.initQuerys();
      this.init();
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 课件分类
      this.classification().then((data) => {
        //赋值查询条件
        let queryObj = sessionStorage.getItem('queryObj');
        if (queryObj) {
          let params = JSON.parse(queryObj);
          this.selectDifficult = params.difficulty || 'All';
          this.createByMe = params.isown;
          this.searchSceneNameValue = params.ecname;
          this.searchSceneDesignerValue = params.designer;
          this.directionModelLevel1 = params.directionModelLevel1 || 'All';
          this.changeTypeLevel1(this.directionModelLevel1);
          this.directionModel = params.directionModel || 'All';
          this.selectDeployStatus = params.deployStatus;
          this.isPublic = params.isPublic || 'All';
          //this.selectExperType = params.expType;
          this.expScenePage = params.pageIndex || 1;
          sessionStorage.removeItem('queryObj');
        }
        this.setStyle();
        this.getSelLabelType();
        //				window.onresize = debounce(this.setStyle(),1000)
        window.onresize = () => {
          this.setStyle();
        };
        // 课件列表
        this.getExperData();
      });
    },
    // 设置高度
    setStyle() {
      window.fullHeight = document.documentElement.clientHeight;
      window.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = window.fullHeight;
      this.fullWidth = window.fullWidth;
      //this.contentHei = this.fullHeight - 60 + 'px' // 80是头部高度  60是上下padding
      this.contentWid = this.fullWidth - 200 - 100; // 200是菜单栏宽度  100是左右padding
      this.setTableHei = this.fullHeight - 60 - 52 - 49 - this.queryHeight + 'px';
      let xishu = 0;
      if (this.fullWidth <= 860) {
        this.spanNum = 2;
        this.expScenePageSize = 6;
        xishu = 0.12;
      }
      if (this.fullWidth <= 1680 && this.fullWidth > 860) {
        this.spanNum = 3;
        this.expScenePageSize = 6;
        xishu = 0.12;
      }
      if (this.fullWidth > 1680 && this.fullWidth <= 2080) {
        this.spanNum = 4;
        this.expScenePageSize = 16;
        xishu = 0.12;
      }
      if (this.fullWidth > 2080) {
        this.spanNum = 5;
        this.expScenePageSize = 20;
        xishu = 0.1;
      }
      this.marginRight = '2%';
      let experAvailableWidth = 1 - 0.02 * (this.spanNum - 1);
      let experWid = (100 - 2 * (this.spanNum - 1)) / this.spanNum;
      this.setExperWid = experWid + '%';
      this.setExperHie = this.contentWid * (experWid / 100) * 0.65 + 'px';
    },
    updateTableHei() {
      setTimeout(() => {
        this.queryHeight = document.querySelector('.filter-wrap').offsetHeight;
        this.setTableHei = this.fullHeight - 60 - 52 - 49 - this.queryHeight + 'px';
      }, 600);
    },
    // 课件列表
    getExperData: debounce(function(val) {
      if (this.sceneListLoading) {
        //正在请求，有新的请求
        this.hasNoExecuteRequest = true;
        return;
      }
      this.sceneListLoading = true;
      this.showDefImg = true;
      this.showContent = false;
      this.showDefText = '加载中';
      let params = {
        pageIndex: this.expScenePage,
        pageSize: this.expScenePageSize,
        order: 'desc',
        sortBy: 'createTime',
        isPublic: '',
        selfType: this.isSelf,
        expType: this.routePath == 'coursewareExp' ? 2 : this.routePath == 'videoExp' ? 1 : 0,
        isown: false
      };
      if (this.selectDifficult != 'All') {
        params.difficulty = this.selectDifficult;
      }
      if (this.createByMe) {
        params.isown = this.createByMe;
      }
      if (this.searchSceneNameValue != '') {
        params.ecname = this.searchSceneNameValue;
      }
      if (this.searchSceneDesignerValue != '') {
        params.designer = this.searchSceneDesignerValue;
      }
      if (this.directionModelLevel1 != 'All') {
        params.typeCode = this.directionModelLevel1;
      }
      if (this.directionModel != 'All') {
        params.typeCode = this.directionModel;
      }
      if (this.selectDeployStatus != 'All') {
        params.deployStatus = this.selectDeployStatus;
      }
      if (this.isPublic != 'All') {
        params.isPublic = this.isPublic;
      }
      if (this.labelExp != 'All') {
        params.labelList = this.labelExp;
      }
      if (this.labelList.length) {
        params.labelList = this.labelList.join(';');
      }
      // if(this.selectExperType) {
      // 	params.expType = this.selectExperType
      // }
      //查询条件存储
      this.queryObj = JSON.stringify(
          Object.assign({}, params, {
            directionModelLevel1: this.directionModelLevel1,
            directionModel: this.directionModel
          })
      );
      // getExpList(params)
      getExpListNotPrivate(params).then((data) => {
        if (data.code == 1) {
          let attribute = data.data;
          let items = attribute.items;
          //							for(let i = 0; i < items.length; i++) {
          //								items[i].showFlag = false
          //							}
          this.expSceneList = items;
          this.expSceneList.forEach((exper) => {
            this.getExperSubscriber(exper);
          });
          this.expSceneTotal = attribute.total;
          if (this.expSceneList.length > 0) {
            this.showDefImg = false;
            this.showContent = true;
          } else {
            this.showDefImg = true;
            this.showDefText = '暂无信息';
            this.showContent = false;
          }
        } else {
          this.$Message.error(data.message);
        }
        this.sceneListLoading = false;
        if (this.hasNoExecuteRequest) {
          this.expSceneOnChange(1);
          this.hasNoExecuteRequest = false;
        }
      })
      .catch((err) => {
        this.showDefImg = true;
        this.showDefText = '暂无信息';
        this.sceneListLoading = false;
        if (this.hasNoExecuteRequest) {
          this.expSceneOnChange(1);
          this.hasNoExecuteRequest = false;
        }
        console.log(err);
      });
    }, 500),
    changeUserListPage(page) {
      this.queryParams.page = page;
      getExperSubscriberPage(this.queryParams).then((data) => {
        if (data.code == 1) {
          this.userData.list = data.attribute.dataList.map((item) => {
            return {
              username: item.userName,
              exptname: item.exptname,
              type: item.resourceassignflag == 'T' ? '教学排课' : '自学收藏',
              createtime: item.createtime
            };
          });
          this.userData.total = data.attribute.totalCount;
        } else {
          this.$Message.error(data.message);
        }
      });
    },
    getExperSubscriber(exper) {
      let params = {
        ecid: exper.ecid,
        page: 1,
        rows: 10
      };
      getExperSubscriberPage(params)
      .then((data) => {
        if (data.code == 1) {
          this.$set(
              exper,
              'subscriber',
              data.attribute.dataList.map((item) => {
                return {
                  username: item.userName,
                  exptname: item.exptname,
                  type: item.resourceassignflag == 'T' ? '教学排课' : '自学收藏',
                  createtime: item.createtime
                };
              })
          );
          this.$set(exper, 'subscriberNum', data.attribute.userNum);
          this.$set(exper, 'totalCount', data.attribute.totalCount);
        } else {
          this.$Message.error(data.message);
        }
      })
      .catch((error) => {
        console.log(error);
        //this.$Message.error(error)
      });
      // 平均得分
      getScoreAvg({experimentId: exper.ecid}).then(data => {
        if(data.code == 1) {
          this.$set(exper, 'scoreAvg', data.data.avg)
          this.$set(exper, 'scoreAvgStar', data.data.avg/2)
        } else {
          this.$set(exper, 'scoreAvg', 0)
          this.$set(exper, 'scoreAvgStar', 0)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 鼠标移入 移出
    //			enter(key) {
    //				this.$set(this.expSceneList[key], 'showFlag', true)
    //			},
    //			leave(key) {
    //				this.$set(this.expSceneList[key], 'showFlag', false)
    //			},
    // 过滤
    expSceneOnChange(val) {
      this.expScenePage = val;
      this.getExperData();
    },
    searchSceneName() {
      this.expScenePage = 1;
      this.getExperData();
    },
    searchSceneDesigner() {
      this.expScenePage = 1;
      this.getExperData();
    },
    changeCreatBox(val) {
      this.expScenePage = 1;
      this.createByMe = val;
      this.getExperData();
    },
    selectDeployChange(val) {
      this.selectDeployStatus = val;
      this.expScenePage = 1;
      this.getExperData();
    },
    changeExperType(val) {
      this.selectExperType = val;
      this.expScenePage = 1;
      this.getExperData();
    },
    changeDiff(val) {
      this.selectDifficult = val;
      this.expScenePage = 1;
      this.getExperData();
    },
    changeIsPublic(val) {
      this.isPublic = val;
      this.expScenePage = 1;
      this.getExperData();
    },
    changeLabelExp(val) {
      this.labelExp = val;
      this.expScenePage = 1;
      this.getExperData();
    },
    changeType(val) {
      this.directionModel = val;
      this.expScenePage = 1;
      this.getExperData();
    },
    changeTypeLevel1(val) {
      this.directionModel = 'All';
      if (val == 'All') {
        this.expClassifyLevel2 = this.expClassify.filter((dict) => dict.parentid);
      } else {
        this.expClassifyLevel2 = this.expClassify.filter((dict) => dict.parentid == val);
      }
      this.directionModelLevel1 = val;
      this.expScenePage = 1;
      this.getExperData();
      this.$refs.directionType.updateHeight();
    },
    initQuerys() {
      this.expScenePage = 1;
      this.selectDifficult = 'All';
      this.createByMe = false;
      this.searchSceneNameValue = '';
      this.isSelf = '';
      this.searchSceneDesignerValue = '';
      this.directionModel = 'All';
      this.directionModelLevel1 = 'All';
      this.expClassifyLevel2 = this.expClassify.filter((dict) => dict.parentid);
      this.selectDeployStatus = '';
      this.isPublic = 'All';
      (this.selectExperType = ''), (this.labelList = []), (this.labelExp = 'All');
    },
    refreshScene() {
      this.initQuerys();
      this.getExperData();
    },
    // 获取场景分类
    classification() {
      return experType()
      .then((data) => {
        if (data.code == 1) {
          let attribute = data.attribute;
          this.expClassify = attribute.attribute[0].dictEntryList;
          this.expClassify.forEach((dict) => {
            dict.key = dict.dictid;
            dict.value = dict.dictname;
          });
          this.expClassifyLevel1 = this.expClassify.filter((dict) => !dict.parentid);
          this.expClassifyLevel2 = this.expClassify.filter((dict) => dict.parentid);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    },
    // 获取标签
    getSelLabelType() {
      getSelLabelType()
      .then((res) => {

        if (res.code == 1) {
          // this.expClassifyTag = res.data[0].dictEntryList
          this.expClassifyTag = res.data[0].dictEntryList.map((item) => {
            return {
              key: item.dictname,
              value: item.dictname
              // value: item.dictid
            };
          });

        } else {
          this.$Message.error('获取标签失败，请刷新重试');
        }
      })
      .catch((error) => {
        this.$Message.error({
          content: error,
          duration: 3
        });
      });
    },
    // 按钮点击状态
    setReBtnStatus(params) {
      let userid = params.createUserId;
      if (
          (userid === this.USER_ID || this.isRootDesigner) &&
          (params.isPublic === '1' || params.isPublic === '0')
      ) {
        return false;
      } else {
        return true;
      }
    },
    // 困难程度
    handleDiffcult(val) {
      switch (val) {
        case 'Simple':
          return '简单';
          break;
        case 'Medium':
          return '中等';
          break;
        case 'Hard':
          return '较难';
          break;
      }
    },
    // 可见范围
    handlePublic(val) {
      let obj = {
        text: '',
        color: '#8d95a6'
      };
      switch (val) {
        case '0':
          return (obj = {
            text: '个人',
            color: 'rgb(255, 165, 0)'
          });
          break;
        case '1':
          return (obj = {
            text: '单位',
            color: 'rgb(50, 205, 50)'
          });
          break;
        case '2':
          return (obj = {
            text: '系统',
            color: 'rgb(65, 105, 225)'
          });
          break;
      }
    },
    //数据字典格式化
    handleTypeCode(dictid) {
      let dictMap = {};
      this.expClassify.forEach((exp) => {
        dictMap[exp.dictid] = exp.dictname;
      });
      return dictMap[dictid];
    },
    handleDirection(dictid) {
      let dictMap = {};
      let direction;
      let type = this.expClassify.find((dict) => dict.dictid == dictid);
      if (type) {
        let aaa = this.expClassify.find((dict) => dict.dictid == type.parentid);
        if (!aaa) {
          return;
        } else {
          direction = aaa.dictname;
        }
      }
      return direction;
    },
    handleExperType(val) {
      switch (val) {
        case 0:
          return this.$store.getters.getMenuName('experiment'); // 实操
          break;
        case 1:
          return this.$store.getters.getMenuName('videoExp');// 视频+理论
          break;
        case 2:
          return this.$store.getters.getMenuName('coursewareExp'); //文本
          break;
      }
    },
    // logo
    handleImage(logo) {
      let src = '';
      if (logo) {
        if (logo.indexOf('Learn') > -1) {
          src = logo;
        } else {
          src = `/Learn/${logo}`;
        }
      } else {
        src = this.defaultImg;
      }
      return src;
    },
    setDefImg() {
      let img = event.srcElement;
      img.src = this.defaultImg;
      img.onerror = null;
    },
    // 删除课件
    delExper(item) {
      let id = item.ecid;
      delExper(id)
      .then((data) => {
        if (data.code == 1) {
          this.$Message.success({
            content: '删除成功',
            duration: 3
          });
          this.expScenePage =
              this.expSceneList.length == 1 && this.expScenePage > 1
                  ? this.expScenePage - 1
                  : this.expScenePage;
          this.getExperData();
        } else {
          this.$Message.error({
            content: data.message,
            duration: 3
          });
        }
      })
      .catch((err) => {
        console.log(err);
      });
    },

    // 修改课件
    modifyExper(item) {
      sessionStorage.setItem('queryObj', this.queryObj);
      this.$router.push({
        name: 'creatExper',
        query: {
          ecid: item.ecid,
          action: 'modify',
          type: this.routePath == 'coursewareExp' ? 2 : this.routePath == 'videoExp' ? 1 : 0,
          expType: this.routePath == 'coursewareExp' ? 2 : this.routePath == 'videoExp' ? 3 : 1
        }
      });
    },
    // 课件详情页
    goExperDetail(item) {
      sessionStorage.setItem('queryObj', this.queryObj);
      this.$router.push({
        name: 'experdetails',
        query: {
          page: this.expScenePage,
          ecid: item.ecid,
          expType: this.routePath == 'coursewareExp' ? 2 : this.routePath == 'videoExp' ? 3 : 1
        }
      });
    },
    // 父元素阻止冒泡事件
    cancel() {},
    showSubscriberModal(item) {
      if (item.subscriber && item.subscriber.length === 0) {
        this.$Message.info({
          content: '当前无人使用',
          duration: 3
        });
        return false;
      }
      this.subscriberModal = true;
      this.curCourseName = item.ecname;
      this.queryParams = {
        page: 1,
        rows: 10,
        ecid: item.ecid
      };
      this.userData = {
        list: item.subscriber,
        total: item.totalCount
      };
    },
    hideDelPop() {
      this.hideDel = false;
    }
  }
};
</script>
<style scoped>
/*查询样式 ---开始*/
.filter-wrap {
  /* padding: 0 20px; */
  margin-top: 20px;
  font-size: 14px;
  color: #8f90a6;
}
/*查询样式 --- 结束*/

.table-wrap {
  /* padding: 0 20px; */
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  flex: auto;
  /*display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;*/
}
.exper-wrap {
  margin-bottom: 15px;
  position: relative;
  /*height: 250px;*/
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  overflow: hidden;
  box-shadow: 0 0 2px #ccc;
  border-radius: 3px;
  overflow: hidden;
}

.exper-wrap:hover {
  box-shadow: 0 0 5px #472c89;
}

.exper-wrap:hover .img-mask {
  top: 0;
  height: 100%;
}

.exper-wrap:hover .img-mask {
  align-items: center;
}

.exper-wrap:hover .img-mask .exper-top {
  display: flex;
}

.exper-wrap:hover .img-mask .exper-bottom {
  display: none;
}

.exper-wrap:hover .img-mask .exper-bottom-name {
  visibility: hidden;
}

.exper-bottom-name {
  /* max-width: calc(100% - 100px); */
  flex: 1;
  white-space: nowrap;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exper-avtar {
  height: 13px;
  width: 11px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 5px;
  margin-top: -3px;
}

.space-between {
  display: flex;
  justify-content: space-between;
}

.exper-img {
  width: 100%;
  height: 100%;
  display: block;
  /*height: 145px;*/
  /*border-radius: 6px 6px 0px 0px;*/
}

.oper-btn {
  position: absolute;
  bottom: 0;
  width: calc(100% - 20px);
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.exper-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  word-break: normal;
  font-weight: bold;
  font-size: 14px;
  /*display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;*/
  margin-bottom: 6px;
}

.exper-user {
  width: 50%;
}

.exper-time {
  display: inline-block;
  max-width: 100%;
  line-height: 1;
}

.exper-user,
.exper-time,
.exper-type,
.exper-model {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  margin-right: 5px;
  position: relative;
  bottom: 6px;
}

.image-box {
  position: relative;
  height: 100%;
}

.exper-top {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
}

.exper-left {
  position: relative;
  width: 70%;
  height: 80%;
  background: var(--imagecard-mask-bgcolor);
  padding: 10px;
  /* font-size: 12px; */
  border-radius: 3px;
  /*overflow: hidden;*/
}

.spaceBetween {
  display: flex;
  justify-content: space-between;
}

.exper-right {
  width: 35%;
  height: 75%;
  margin-left: 4%;
  color: #fff;
  visibility: hide;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding-top: 30px;
  box-sizing: border-box; */
}

.exper-bottom {
  width: 100%;
  height: 20%;
  align-items: flex-end;
  color: #fff;
  /*padding: 0 10px;*/
}

.img-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 80%;
  left: 0;
  /*opacity: 0;*/
  background-color: rgba(0, 0, 0, .5);
  padding: 0 10px;
  display: flex;
  /*flex-direction: column;*/
  justify-content: space-between;
  transition: all .4s ease-in-out;
  align-items: flex-start;
}

.exper-info {
  color: #8d95a6;
}

.exper-btn {
  border-color: #8d95a6;
  color: #8d95a6;
}

.notBegin {
  position: absolute;
  color: #000;
  border: 1px solid #ccc;
  background: #ffffff;
  padding: 3px 10px;
  display: inline-block;
  border-radius: 15px;
  position: absolute;
  top: 10%;
  right: 15px;
  z-index: 1;
}

.beginning {
  position: absolute;
  color: #fff;
  border: 1px solid #ccc;
  background: #2ccb71;
  padding: 3px 10px;
  display: inline-block;
  border-radius: 15px;
  top: 10%;
  right: 15px;
  z-index: 1;
}

.finish {
  position: absolute;
  color: #fff;
  border: 1px solid #ccc;
  padding: 3px 10px;
  background: #db0101;
  display: inline-block;
  border-radius: 15px;
  top: 10%;
  right: 15px;
  z-index: 1;
}
/**/
.text-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.bottom-page-wrap{
  display: flex;
  justify-content: center;
  margin:15px 0;
}
.exper-icon {
  vertical-align: text-bottom;
}
/deep/ .pt-content-top{
  padding-top: 0;
}
</style>
